<script setup lang="ts">
import {onMounted, reactive, ref} from "vue";
import type {MenuData} from "@/api/acl/user/type.ts";
import {reqAddOrUpdatePermission, reqGetAllPermission, reqRemoveMenu} from "@/api/acl/menu/index.ts";
import type {MenuParam} from "@/api/acl/menu/type.ts";
import {ElMessage} from "element-plus";

let tableData = ref<MenuData[]>([]);
const getAllMenu = async () => {
  let result = await reqGetAllPermission();
  if (result.data.code === 200) {
    tableData.value = result.data.data;
  }
}
onMounted(() => {
  getAllMenu();
});

let dialogVisible = ref<boolean>(false);
let menuParam = reactive<MenuParam>({
  pid: 1,
  name: '',
  code: '',
  level: 1,
});
const toAdd = (row: MenuData) => {
  Object.assign(menuParam, {
    pid: 0,
    name: '',
    code: '',
    level: 0,
  });
  menuParam.level = row.level + 1;
  menuParam.pid = row.id as number;
  dialogVisible.value = true;
}
const toEdit = (row: MenuData) => {
  Object.assign(menuParam, row);
  dialogVisible.value = true;
}
const save = async () => {
  console.log(menuParam);
  let result = await reqAddOrUpdatePermission(menuParam);
  if (result.data.code == 200) {
    await getAllMenu();
    dialogVisible.value = false;
    ElMessage({
      type: "success",
      message: menuParam.id ? "修改成功" : "添加成功"
    });
  } else
    ElMessage({
      type: "error",
      message: menuParam.id ? "修改失败" : "添加失败"
    });

}

const removeMenu = async (id:number) => {
  let result = await reqRemoveMenu(id);
  if (result.data.code == 200) {
    await getAllMenu();
    ElMessage.success("删除成功");
  }else
    ElMessage.success("删除失败");
}
</script>

<template>
  <div>
    <el-table
        :data="tableData"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        border
    >
      <el-table-column prop="name" label="名称"/>
      <el-table-column prop="code" label="权限值"/>
      <el-table-column prop="updateTime" label="修改时间"/>
      <el-table-column label="操作">
        <template #default="{row}">
          <el-button type="primary" size="small" icon="Plus" v-show="row.level!=4" @click="toAdd(row)"></el-button>
          <el-button type="warning" size="small" icon="Edit" v-show="row.level!=1" @click="toEdit(row)"></el-button>
          <el-button type="danger" size="small" icon="Delete" v-show="row.level!=1"
                     @click="removeMenu(row.id)"></el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog v-model="dialogVisible" width="30%" :title="menuParam.id?'修改菜单':'添加菜单'">
      <el-form label-position="right" label-width="80px">
        <el-form-item label="名称">
          <el-input v-model="menuParam.name"></el-input>
        </el-form-item>
        <el-form-item label="权限值">
          <el-input v-model="menuParam.code"></el-input>
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button type="primary" @click="save">确定</el-button>
        <el-button type="info" @click="dialogVisible=false">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">

</style>